<template>
    <div class="appointment-card">
        <div class="card-header">
            <div class="hospital-name">{{ appointment.hospitalName }}</div>
            <div class="status" :class="statusClass">{{ statusText }}</div>
        </div>

        <div class="card-content">
            <!-- 医生信息 -->
            <div class="info-row">
                <div class="info-label">科室医生：</div>
                <div class="info-value">
                    {{ appointment.departmentName }} | {{ appointment.doctorName }} {{ appointment.doctorTitle }}
                </div>
            </div>

            <!-- 患者信息 -->
            <div class="info-row">
                <div class="info-label">就诊人：</div>
                <div class="info-value">{{ appointment.patientName }}</div>
            </div>

            <!-- 时间信息 -->
            <div class="info-row">
                <div class="info-label">就诊时间：</div>
                <div class="info-value">{{ appointment.appointmentTime }}</div>
            </div>

            <!-- 订单号 -->
            <div class="info-row">
                <div class="info-label">订单号：</div>
                <div class="info-value order-no">{{ appointment.orderNo }}</div>
            </div>
        </div>

        <div class="card-footer">
            <div class="fee">
                <span class="fee-label">挂号费：</span>
                <span class="fee-value">¥{{ appointment.fee }}</span>
            </div>

            <div class="actions">
                <!-- 待就诊状态显示取消按钮 -->
                <van-button v-if="appointment.status === 'pending'" size="small" plain
                    @click="$emit('cancel', appointment.id)">
                    取消预约
                </van-button>

                <!-- 已完成状态显示评价按钮 -->
                <van-button v-if="appointment.status === 'completed'" size="small" type="primary" plain
                    @click="$emit('rate', appointment.id)">
                    评价
                </van-button>

                <!-- 所有状态都显示详情按钮 -->
                <van-button size="small" type="primary" @click="$emit('view', appointment.id)">
                    查看详情
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义预约类型接口
interface Appointment {
    id: number
    hospitalName: string
    departmentName: string
    doctorName: string
    doctorTitle: string
    patientName: string
    appointmentTime: string
    status: 'pending' | 'completed' | 'cancelled'
    fee: number
    orderNo: string
}

// 组件props定义
const props = defineProps<{
    appointment: Appointment
}>()

// 定义事件
defineEmits<{
    (e: 'cancel', id: number): void
    (e: 'rate', id: number): void
    (e: 'view', id: number): void
}>()

// 根据状态计算显示文本和样式
const statusText = computed(() => {
    switch (props.appointment.status) {
        case 'pending':
            return '待就诊'
        case 'completed':
            return '已完成'
        case 'cancelled':
            return '已取消'
        default:
            return '未知状态'
    }
})

const statusClass = computed(() => {
    return {
        'status-pending': props.appointment.status === 'pending',
        'status-completed': props.appointment.status === 'completed',
        'status-cancelled': props.appointment.status === 'cancelled'
    }
})
</script>

<style scoped lang="scss">
.appointment-card {
    background: #fff;
    border-radius: 8px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #f5f5f5;

        .hospital-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .status {
            font-size: 14px;
            padding: 2px 8px;
            border-radius: 10px;

            &.status-pending {
                color: #1890ff;
                background: #e6f7ff;
            }

            &.status-completed {
                color: #52c41a;
                background: #f6ffed;
            }

            &.status-cancelled {
                color: #999;
                background: #f5f5f5;
            }
        }
    }

    .card-content {
        padding: 12px 16px;

        .info-row {
            display: flex;
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 1.5;

            &:last-child {
                margin-bottom: 0;
            }

            .info-label {
                width: 75px;
                flex-shrink: 0;
                color: #666;
            }

            .info-value {
                flex: 1;
                color: #333;

                &.order-no {
                    color: #999;
                    font-size: 13px;
                }
            }
        }
    }

    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-top: 1px solid #f5f5f5;

        .fee {
            .fee-label {
                font-size: 14px;
                color: #666;
            }

            .fee-value {
                font-size: 16px;
                font-weight: 500;
                color: #ff525d;
            }
        }

        .actions {
            display: flex;
            gap: 8px;

            .van-button {
                min-width: 80px;
            }
        }
    }
}
</style>